<template>
  <div class="section-container backup-container">
    <div class="section-title">
      备份策略
    </div>
    <div class="content">
      <div class="block">
        <div class="tip">基本设置</div>
        <div class="row">
          <div class="label">备份次数</div>
          <div class="content">
            <el-radio-group v-model="backupConfig.frequency" class="frequency-select">
              <el-radio :label="1">每天一次</el-radio>
              <el-radio :label="2">每天两次</el-radio>
              <el-radio :label="3">每天三次</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="row">
          <div class="label">备份时间</div>
          <div class="content time-select">
            <template v-if="backupConfig.frequency >= 1">
              <el-time-picker v-model="backupConfig.time1" placeholder="选择时间" format="HH:mm" />
            </template>
            <template v-if="backupConfig.frequency >= 2">
              <el-time-picker v-model="backupConfig.time2" placeholder="选择时间" format="HH:mm" />
            </template>
            <template v-if="backupConfig.frequency >= 3">
              <el-time-picker v-model="backupConfig.time3" placeholder="选择时间" format="HH:mm" />
            </template>
          </div>
        </div>
      </div>
    </div>
    <el-button type="primary" @click="handleSave">保存</el-button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const backupConfig = reactive({
  frequency: 1,
  time1: null,
  time2: null,
  time3: null
})

const handleSave = () => {
  console.log(backupConfig)
}
</script>

<style scoped lang="scss">
.backup-container {
  .content {
    margin-bottom: 16px;
    .block {
      background: rgb(255, 255, 255);
      font-family: PingFangSC;
      color: rgb(51, 51, 51);
      letter-spacing: 0px;
      .tip {
        padding: 0px 16px;
        font-weight: 500;
        color: rgb(128, 128, 128);
        line-height: 22px;
        margin-top: 16px;
      }
      .row {
        display: flex;
        padding: 15px 16px;
        line-height: 32px;
        border-bottom: 1px solid rgb(229, 229, 229);
        .label {
          width: 90px;
          font-weight: 500;
          margin-right: 24px;
        }
        .content {
          flex: 1;
          display: flex;
          align-items: center;
          color: rgb(128, 128, 128);
          margin-right: 24px;
          &.time-select {
            .el-time-picker {
              margin-right: 16px;
              &:last-child {
                margin-right: 0;
              }
            }
          }
          .frequency-select {
            .el-radio {
              margin-right: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
